<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    本地引入-->
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
  插值语法
    1.  可以在标签内容节点的任何位置插入数据  标签中的原始数据不是受到影响
    2. 插值语法支持一些简单运算  如果运算比较负载  不要写在插值语法中
       2.1  属性
       2.2  函数
       2.3 数学运算
-->
<!--初始化容器-->
<div id="app">
    <h1>标题:{{title}}</h1>
    <h1>标题:{{title.length}}</h1>
    <h1>{{info.toUpperCase()}}</h1>
    <h1>num:{{num}}</h1>
    <h1>num+2:{{num+2}}</h1>
    <h1>num>2:{{num>2}}</h1>
</div>


<!--创建vue实例-->
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            title: '插值语法的基本使用',
            info:'hello',
            num:10
        }
    })

</script>
</body>
</html>
